.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36rpx;

  .indicate {
    width: 72rpx;
    height: 6rpx;
    margin-top: -36rpx;

    &.tongxing {
      height: 24rpx;
      border-radius: 0rpx;
    }
  }

  .item {
    display: flex;
    align-items: center;
    flex-direction: column;

    &.active {
      .num-box {
        background-color: rgba(255, 255, 255, 0.3);

        .count {
          width: 68rpx;
          height: 68rpx;
          background-color: #fff;
        }
      }
    }

    .num-box {
      width: 92rpx;
      height: 92rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8rpx;
      border-radius: 50%;

      .count {
        width: 52rpx;
        height: 52rpx;
        background-color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #9CDB14;
        font-weight: 400;
        font-size: 32rpx;
      }
    }

    .title {
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;

      &.color-black {
        font-weight: 700;
        color: #000;
      }
    }
  }
}